@if (!(formSection.hiddenChanges | async)) {
    @if (formSection.separator; as separator) {
        <div class="header">
            <h3>{{ separator!.displayName }}</h3>

            @if (separator.properties.hints && separator.properties.hints.length > 0) {
                <sqx-form-hint> <span inline="true" optional="true" [sqxMarkdown]="separator.properties.hints"></span> </sqx-form-hint>
            }
        </div>
    }

    <div class="row">
        @for (child of formSection.fields; track child.field.fieldId) {
            <div
                class="form-group"
                [class.col-12]="isComparing || !child.field.properties.isHalfWidth"
                [class.col-6]="!isComparing && child.field.properties.isHalfWidth">
                @if (!(child.hiddenChanges | async)) {
                    <sqx-field-editor
                        [comments]="null"
                        [form]="form"
                        [formContext]="formContext"
                        [formLevel]="formLevel"
                        [formModel]="child"
                        [hasChatBot]="hasChatBot"
                        [index]="index"
                        [isComparing]="isComparing"
                        [language]="language"
                        [languages]="languages" />
                }
            </div>
        }
    </div>
}
